<template>
	<view class="code_box" :style="{backgroundImage: 'url('+promoteBgImg+')'}">
		<nav-bar fontColor="#FFF" bgColor="themeBgColor" type="transparentFixed"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<canvas canvas-id="poster" class="poster"></canvas>
		<image class="code" :src="webViewUrl" mode="aspectFill"></image>
		<view class="name">我是：{{nickName}}</view>
		<!-- #ifndef H5 -->
		<button class="download" @click="onSaveImg">保存图片</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button class="download">长按保存图片</button>
		<view class="poster_img">
			<image :src="posterImg" mode="aspectFill"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// 文字换行
	function drawtext(text) {
		let textArr = text.split("");
		let len = textArr.length;
		// 上个节点
		let previousNode = 1;
		// 记录节点宽度
		let nodeWidth = 0;
		// 文本换行数组
		let rowText = [];
		for (let i = 0; i < len; i++) {
			if (/[\u4e00-\u9fa5]/g.test(textArr[i])) {
				nodeWidth += 18;
			} else {
				nodeWidth += 9;
			}
		}
		return nodeWidth;
	}
	let settingWritePhotosAlbum = false;
	export default {
		data() {
			return {
				nickName: '',
				promoteBgImg: "",
				posterImg: "",
			};
		},
		//第一次加载
		onLoad(e) {
			if (this.$base.promoteBgImg) {
				this.promoteBgImg = this.$base.promoteBgImg;
			}
			if (e.nickName) {
				this.nickName = e.nickName;
				this.createPoster();
			}
		},
		computed: {
			...mapState(['webViewUrl'])
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			// 创建海报
			createPoster() {
				uni.showLoading({
					title: '加载中'
				});
				const ctx = uni.createCanvasContext('poster');
				ctx.fillRect(0, 0, 375, 811);
				uni.downloadFile({
					url: this.promoteBgImg,
					success: (res) => {
						if (res.statusCode === 200) {
							ctx.drawImage(res.tempFilePath, 0, 0, 375, 811);
							uni.downloadFile({
								url: this.webViewUrl,
								success: (res) => {
									if (res.statusCode === 200) {
										ctx.drawImage(res.tempFilePath, 117.5, 577, 140, 140);
										ctx.setFontSize(16);
										ctx.setFillStyle('#FFFFFF');
										let fontWidth = drawtext(this.nickName);
										ctx.fillText(this.nickName, (375 - fontWidth) / 2, 560);
										ctx.draw(true, () => {
											// canvas画布转成图片并返回图片地址
											uni.canvasToTempFilePath({
												canvasId: 'poster',
												success: (res) => {
													uni.hideLoading();
													this.posterImg = res.tempFilePath;
												},
												fail: () => {
													uni.hideLoading();
													console.log('绘制失败');
												}
											})
										});
									}
								},
							});
						}
					},
				});
			},
			// 保存图片
			onSaveImg() {
				if (this.posterImg) {
					// #ifdef MP-WEIXIN
					if (settingWritePhotosAlbum) {
						uni.getSetting({
							success: res => {
								if (res.authSetting['scope.writePhotosAlbum']) {
									uni.downloadFile({
										url: this.posterImg,
										success: data => {
											if (data.statusCode == 200) {
												uni.saveImageToPhotosAlbum({
													filePath: data.tempFilePath,
													success: () => {
														uni.showToast({
															title: '保存成功'
														});
													}
												});
											}
										}
									});
								} else {
									uni.showModal({
										title: '提示',
										content: '请先在设置页面打开“保存相册”使用权限',
										confirmText: '去设置',
										cancelText: '算了',
										success: data => {
											if (data.confirm) {
												uni.openSetting();
											}
										}
									});
								}
							}
						});
					} else {
						settingWritePhotosAlbum = true;
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: () => {
								uni.downloadFile({
									url: this.posterImg,
									success: data => {
										if (data.statusCode == 200) {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功'
													});
												}
											});
										}
									}
								});
							}
						});
					}
					// #endif
					// #ifdef H5
					uni.downloadFile({
						url: this.posterImg,
						success: data => {
							if (data.statusCode == 200) {
								window.open(data.tempFilePath);
							}
						}
					});
					// #endif
					// #ifdef APP-PLUS
					uni.saveImageToPhotosAlbum({
						filePath: this.posterImg,
						success: () => {
							uni.showToast({
								title: '保存成功'
							});
						}
					});
					// #endif
				} else {
					uni.showToast({
						title: '海报正在生成中，请稍后',
						icon: 'none'
					});
				}
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.poster {
		width: 750rpx;
		height: 1622rpx;
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
	}

	.code_box {
		height: 100vh;
		width: 100%;
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100% auto;

		.code {
			width: 280rpx;
			height: 280rpx;
			position: fixed;
			z-index: 3;
			left: 50%;
			transform: translateX(-50%);
			bottom: 190rpx;
		}

		.name {
			position: absolute;
			left: 50%;
			bottom: 500rpx;
			z-index: 3;
			font-size: 28rpx;
			color: #ffffff;
			transform: translateX(-50%);
		}
	}
	.download {
		font-size: 24rpx;
		color: #ffffff;
		margin-top: 36rpx;
		background-color: transparent;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		&:before {
			content: "";
			@include  bis("../../../static/icon/icon_download.png");
			width: 24rpx;
			height: 24rpx;
			margin-right: 15rpx;
		}
	}
	.poster_img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 6;
		image {
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
